<!--运行分享  跟单策略-->
<template>
  <div class="bg">
    <div class="bg" v-if="param">
      <!-- <LImage class="bg-image" :src="Config.img('celue_bg.png')"></LImage> -->
      <div class="title">
        <text class="font30 text1">{{T('Vtrading')}}</text>
        <div class="title-line"></div>
        <text class="font30 text1">{{T('策略交易')}}</text>
      </div>

      <div class="explain">
        <text class="font32 text1">{{T('我在Vtrading')}}</text>
        <div class="height10"></div>
        <text class="font32 text1">{{T('跟随&{1}进行策略交易').replace("&{1}", param.nickName)}}</text>
      </div>

      <div class="rate">
        <div class="row aend">
          <text :class="['font108', Config.upDownFont(param.totalRate)]">{{math.addJia(param.totalRate)}}</text>
          <text :class="['font68', Config.upDownFont(param.totalRate)]">{{'%'}}</text>
        </div>
        <div class="height10"></div>
        <text class="font24 lan th33">{{T('获得收益率')}}</text>
      </div>

      <div class="tag">
        <text class="font32 text1">{{T('快来跟单吧！')}}</text>
      </div>

      <div class="data">
        
        <div class="data-value all">
          <div class="column">
            <text class="font24 lan th33">{{T('投入币种')}}</text>
            <div class="height15"></div>
            <text class="font28 text1">{{T(param.investCoin)}}</text>
          </div>
        </div>

        <div class="line"></div>
        <div class="data-value all">
          <div class="column">
            <text class="font24 lan th33">{{T('执行时长')}}</text>
            <div class="height15"></div>
            <text class="font28 text1">{{param.time}}</text>
          </div>
        </div>

        <div class="line"></div>
        <div class="data-value all">
          <div class="column aend">
            <text class="font24 lan th33">{{T('年化收益率')}}</text>
            <div class="height15"></div>
            <text class="font28 text1">{{param.yearRate+'%'}}</text>
          </div>
        </div>
      </div> 

      <div class="all"></div>
      <div class="info">
        <LImage class="logo" :src="Config.img('logo.png')"></LImage>
        <div class="column all">
          <text class="font24 text1">{{T('数字资产AI量化服务平台')}}</text>
          <text class="font22 text1">{{'Go with Vtrading to Victory'}}</text>
        </div>
        <div class="code-bg">
          <WeexQRCode v-if="inviteUrl" class="code" :code="inviteUrl"></WeexQRCode>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

//功能
import modal from "@/_js/modal";
import math from "@/_js/math";
import Config from "@/_js/config";
import navigator from "@/_js/navigator";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {
  data() {
    return {
      T:T,
      math:math,
      Config:Config,
      param:undefined,
      inviteUrl:'',

      keys:['nickName', 'totalRate', 'investCoin', 'time', 'yearRate']
    };
  },

  mounted() {

    weexFunction.getConfig("onlySign",(value)=>{
      this.inviteUrl = value ? (Config.inviteUrl + value) : Config.inviteUrl;
    });

    Config.init(()=>{

      var param = navigator.getParam('param');
      for (let index = 0; index < this.keys.length; index++) {
        var key = this.keys[index];
        if (param[key] == null) {
          setTimeout(() => {
            modal.toast('缺失：'+key);
          }, 200);
          return true;
        }
      }
      this.param = param;
    },[Config.OPT_UP_DOWN]);
  },

  methods: {
  }
}

</script>


<style src="@/_css/style.css"></style>
<style scoped>
.bg {
  align-items: flex-start;
  background-color: #131C61;
  width: 750px;
  min-height: 1220px;
}
.title{
  flex-direction: row;
  align-items: center;
  margin-top: 90px;
  margin-left: 60px;
}
.title-line{
  width: 1px;
  height: 35px;
  margin-right: 16px;
  margin-left: 16px;
  background-color:#8BAEF7;
}
.bg-image{
  position: absolute;
  width: 534px;
  height: 696px;

  top: 405px;
  right: 0px;
}

/** 说明*/
.explain{
  flex-direction: column;

  border-top-left-radius: 60px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  border-bottom-left-radius: 2px;

  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
  padding-right: 80px;
  
  margin-top: 110px;
  margin-left: 50px;
  background-color: #11246C;
}

/** 总收益率*/
.rate{
  flex-direction: column;
  align-items: center;
  width: 680px;
  margin-left: 35px;
  margin-top: 110px;
}

/** 标签*/
.tag{
  flex-direction: column;

  border-top-left-radius: 60px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  border-bottom-left-radius: 2px;

  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 40px;
  padding-right: 40px;
  
  margin-top: 70px;
  margin-left: 50px;
  background-color: #11246C;
}

/** 数据*/
.data{
  margin-top: 90px;
  width: 750px;
  flex-direction: row;
  align-items: center;
}
.data-value{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.line{
  width: 1px;
  height: 71px;
  background-color:#192F7C;
}

/** 信息*/
.info{
  flex-direction: row;
  align-items: center;
  background-color: #1A2B86;
  width: 750px;
  height: 150px;
}
.logo{
  width: 72px;
  height: 72px;
  margin-left: 50px;
  margin-right: 20px;
}

.code-bg{
  justify-content: center;
  align-items: center;
  background-color: #fff;
  width: 110px;
  height: 110px;
  margin-right: 50px;
  margin-left: 20px;
}
.code{
  width: 105px;
  height: 105px;
}

/**** 高度*/
.height10{
  height: 10px;
}
.height15{
  height: 15px;
}
.height26{
  height: 26px;
}

/****颜色*/
.lan{
  color:#0089F3;
}
</style>